<template>
	<el-dialog title="添加分类" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false"
		:modal-append-to-body="false" v-drag2anywhere>
		<el-form :model="formData" ref="formData" label-width="100px" :rules="rules">
			<el-row :gutter="30">
				<el-col>
					<el-form-item label="上级分类" prop="pid">
						<el-select v-model="formData.pid" placeholder="请选择" style="width: 100%;">
							<el-option label="无" value="-1" ></el-option>
							<el-option :label="item.title" :value="item.catid" v-for="(item,index) in menuList" :key="index">
								 <div style="padding-left: 0px;" v-if="item.level==0">
									 {{item.title}}{{item.level}}
								</div>
								<div style="padding-left: 15px;" v-if="item.level==1">
									 ┠──{{item.title}}{{item.level}}
								</div>
								<div style="padding-left: 40px;"  v-if="item.level==2">
									 ┠──{{item.title}}{{item.level}}
								</div>
								<div style="padding-left: 50px;" v-if="item.level==3">
									 ┠──{{item.title}}{{item.level}}
								</div>
								
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="分类名称" prop="title">
						<el-input v-model="formData.title" placeholder="请输入分类名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="分类简介" prop="desc">
						<el-input type="textarea" v-model="formData.desc" :rows="5" placeholder="请输入分类简介"
							clearable></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="分类图片" prop="thumb">
						
					</el-form-item>
				</el-col>

				<el-col>
					<el-form-item label="排序" prop="order">
						<el-input v-model="formData.order" type="passowrd" placeholder="排序" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="状态" prop="status">
						<el-switch :value="formData.status" :active-value="1" :inactive-value="0"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<div style="line-height: 30px; padding: 0px 10px;color:#888"></div>
				</el-col>
			</el-row>
		</el-form>

		<div slot="footer" style="text-align: center;">
			<el-button @click="dialogVisible = false" size="medium">取 消</el-button>
			<el-button type="primary" size="medium" @click="handleSave">确定</el-button>
		</div>

	</el-dialog>
</template>

<script>
	import http from '/src/utils/http.js';
	export default {
		name: "CreateUI",
		data() {
			return {
				formData: {
					pid: "-1",
					title:'',
					desc:'',
					thumb:'',
					status:1,
					order:0,
				},
				menuList:[],
				rules: {
					"pid": [{
						required: true,
						message: "请选择父级分类",
						trigger: "change"
					}],
					"title": [{
						required: true,
						message: "请输入分类名称",
						trigger: "blur"
					}],
					"order": [{
						required: true,
						message: "请输入排序数",
						trigger: "blur"
					}]
				},
				dialogVisible: false
			}
		},
		mounted() {
			this.loadDataList();
		},
		methods: {
			init(){
				this.formData= {
					pid: "-1",
					title:'',
					desc:'',
					thumb:'',
					status:1,
					order:0,
				}
			},
			loadDataList(){
				http.post("/api/admin/articlecategory/list_array").then(res => {
					if (res.status == 200 && res.data.code) {
						this.menuList=res.data.list;
						console.log(this.tableData);
					}
				}).catch(error => {})
			},
			handleSave() {
				this.$refs.formData.validate((ok) => {
					if(ok){
						http.post("/api/admin/articlecategory/create",this.formData).then(res => {
							if(res.status==200 && res.data.code){
								this.$message.success({message:res.data.msg,duration:1500,showClose:true});
								this.$emit("complete");
								this.dialogVisible=false;
							}else{
								this.$message.success({message:res.data.msg,duration:1500,showClose:true});
							}
						}).catch(error=>{})
						
					}
				});
			}
		}
	}
</script>

<style>
</style>